<!-- 百宝箱页 -->
<!-- 小瓜子更新于 2020.10.11
	 页面布局 -->
<template>
	<view class="tools">
		<!-- <view class="loading" :style="'height:' + loadingHeight + 'px;width: 100%;'">
			<text :style="'display: block; width: 100%; height: 100%; text-align: center; color:#999'">程序员小姐姐正在加紧开发中(≧▽≦)</text>
		</view> -->
		<!-- <Notice></Notice> -->
		<!-- <button type="default" @click="navToRes">餐厅</button> -->
		<view class="tools_box">
			<view class="collection_name">
				生活
			</view>
			<view class="tool_collection">
				<view class="each_tool" @tap="underdevaloped">
					<text class="inxupt inxupttubiao47" ></text>
					<text>食堂餐品</text>
				</view>
				<view class="each_tool" @tap="underdevaloped">
					<text class="inxupt inxupttubiao48"></text>
					<text>社团集合</text>
				</view>
				<view class="each_tool" @tap='underdevaloped'>
					<text class="inxupt inxupttubiao45"></text>
					<text>社群汇总</text>
				</view>
			</view>
		</view>
		
		<view class="tools_box">
			
			<view class="tool_collection" @tap='underdevaloped'>
				<view class="each_tool" @tap='underdevaloped'>
					<text class="inxupt inxupttubiao49"></text>
					<text>课程表</text>
				</view>
				<view class="each_tool" @tap='underdevaloped'>
					<text class="inxupt inxupttubiao46"></text>
					<text>实验室</text>
				</view>
			</view>
			<view class="collection_name">
				学习
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingHeight: 0,
				urlList: [
					'../Restaurant/Restaurant'
				]
			}
		},
		methods: {
			underdevaloped() {
				uni.showToast({
					title: '程序员小姐姐正在加紧开发中(≧▽≦)',
					icon:'none'
				})
			},
			navToRes(index){
				uni.navigateTo({
					url: this.urlList[index],
					animationType:"zoom-out"
				})
			}
		}
	}
</script>

<style lang="less">
.inxupt {
	margin-right: 10rpx ;
}
.tools_box {
	@item-width: calc(0.25 * 750rpx);
	width: 85%;
	margin: 10px auto;
	height: @item-width;
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
	.collection_name {
		width: @item-width;
		height: 100%;
		text-align: center;
		background-color: @g-pink;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: @item-width;
		border-radius: 20rpx;
		box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
	}
	.tool_collection {
		width: calc(@item-width * 2 + 0.05 * 750rpx);
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		flex-wrap: wrap;
		.each_tool {
			width: @item-width;
			height: 40%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			background-color: #FFFFFF;
			padding-left: 10rpx;
			box-sizing: border-box;
			border-radius: 15rpx;
			box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.1);
		}
	}
}
</style>
